<template>
	<view class="bs-detail">
		<!-- 顶部背景装饰 -->
		<view class="page-bg"></view>

		<!-- 比赛基本信息 -->
		<view class="match-info">
			<view class="match-title">比赛详情</view>
			<view class="teams">
				<view class="team">
					<view class="logo-wrapper">
						<image v-if="match.teamAImg" :src="config.baseUrl + match.teamAImg" mode="aspectFit" class="team-logo"></image>
					</view>
					<view class="team-name">{{ match.teamAname }}</view>
				</view>
				<view class="vs">
					<view class="score">{{ match.res }}</view>
					<view class="time">{{ match.startTime }}</view>
				</view>
				<view class="team">
					<view class="logo-wrapper">
						<image v-if="match.teamBImg" :src="config.baseUrl + match.teamBImg" mode="aspectFit" class="team-logo"></image>
					</view>
					<view class="team-name">{{ match.teamBname }}</view>
				</view>
			</view>
		</view>

		<!-- 加入按钮 -->
		<view class="join-section">
			<button class="join-btn" @tap="handleJoin">加入比赛</button>
		</view>

		<!-- 标签页导航 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" @tap="switchTab(index)">
				{{ tab }}
			</view>
		</view>

		<!-- 标签页内容 -->
		<view class="tab-content">
			<!-- 数据标签页 -->
			<view v-if="currentTab === 0" class="data-tab">
				<view class="data-card">
					<view class="data-title">比赛信息</view>
					<!--比赛时间  -->
					<view class="match-time">
						<view class="info-label">
							<text class="icon">⏱</text>
							<text>比赛时间</text>
						</view>
						<view class="info-value">{{ match.startTime }}</view>
					</view>
					<view class="match-time">
						<view class="info-label">
							<text class="icon">📍</text>
							<text>比赛城市</text>
						</view>
						<view class="info-value">{{ match.location }}</view>
					</view>
					<view class="match-time">
						<view class="info-label">
							<text class="icon">👟</text>
							<text>比赛装备</text>
						</view>
						<view class="info-value">{{ match.zhuangbei }}</view>
					</view>
					<view class="match-time">
						<view class="info-label">
							<text class="icon">📋</text>
							<text>比赛规则</text>
						</view>
						<view class="info-value">{{ match.guize }}</view>
					</view>
					<!-- 赛制 -->
					<view class="match-time">
						<view class="info-label">
							<text class="icon">🏆</text>
							<text>赛制</text>
						</view>
						<view class="info-value">{{ match.matchType }}</view>
					</view>
				</view>

				<!-- <view class="empty-tip" v-if="!match.teamAScore && !match.teamBScore">暂无比赛数据</view> -->
			</view>
			<!-- 详情标签页 -->
			<view v-if="currentTab === 1" class="detail-tab">
				<!-- 比赛记录列表 -->
				<view class="match-records" v-if="matchRecords && matchRecords.length > 0">
					<view class="record-title">比赛记录</view>
					<view class="record-item" v-for="(record, index) in matchRecords" :key="record.id">
						<view class="record-info">
							<text class="record-name">进球人 {{ record.name }}</text>
						</view>
						<view class="record-time">{{ record.time }}</view>
					</view>
				</view>
				<!-- <view class="empty-tip" v-else>暂无比赛记录</view> -->
			</view>

			<!-- 视频标签页 -->
			<view v-if="currentTab === 2" class="video-tab">
				<view class="video-list" v-if="match.videos && match.videos.length">
					<view class="video-item" v-for="(video, index) in match.videos" :key="index">
						<video :src="config.baseUrl + video.url" :poster="config.baseUrl + video.cover" controls></video>
						<view class="video-name">{{ video.name }}</view>
					</view>
				</view>
				<view v-else class="empty-tip">暂无比赛视频</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from "@/config";
import { joinMatch, getMatchById } from "@/api/system/bs";

export default {
	data() {
		return {
			match: {},
			config: config,
			tabs: ["详情", "记录", "视频"],
			currentTab: 0,
			matchRecords: []
		};
	},
	onLoad() {
		this.match = JSON.parse(uni.getStorageSync("bsDetal"));
		console.log(this.match);

		// 处理视频数据
		if (this.match.videos) {
			try {
				this.match.videos = JSON.parse(this.match.videos);
			} catch (e) {
				console.error("视频数据解析错误:", e);
				this.match.videos = [];
			}
		}

		// 处理比分数据
		if (this.match.res) {
			const scores = this.match.res.split(":");
			if (scores.length === 2) {
				this.match.teamAScore = scores[0].trim();
				this.match.teamBScore = scores[1].trim();
			}
		}
		this.getMatchById();
	},
	methods: {
		async getMatchById() {
			try {
				const res = await getMatchById(this.match.id);
				console.log(res);
				if (res.code === 200 && res.data) {
					this.matchRecords = res.data;
				}
			} catch (error) {
				console.error("获取比赛记录失败:", error);
			}
		},
		async handleJoin() {
			try {
				const res = await joinMatch(this.match.id);
				if (res.code === 200) {
					uni.showToast({
						title: "加入成功",
						icon: "success"
					});
				} else {
					uni.showToast({
						title: res.msg || "加入失败",
						icon: "none"
					});
				}
			} catch (error) {
				console.error("加入比赛失败:", error);
				uni.showToast({
					title: "加入失败，请稍后重试",
					icon: "none"
				});
			}
		},
		switchTab(index) {
			this.currentTab = index;
		}
	}
};
</script>

<style lang="scss">
.bs-detail {
	min-height: 100vh;
	background-color: #f5f6fa;
	position: relative;

	.page-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 300rpx;
		background: linear-gradient(135deg, #4a90e2, #2c3e50);
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		z-index: 0;
	}

	.match-info {
		position: relative;
		z-index: 1;
		margin: 40rpx 30rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.match-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 40rpx;
		}

		.teams {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.team {
				text-align: center;
				flex: 1;

				.logo-wrapper {
					width: 160rpx;
					height: 160rpx;
					margin: 0 auto 20rpx;
					background: #fff;
					border-radius: 50%;
					padding: 20rpx;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

					.team-logo {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.team-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.vs {
				padding: 0 40rpx;
				text-align: center;

				.score {
					font-size: 48rpx;
					font-weight: bold;
					color: #2c3e50;
					margin-bottom: 16rpx;
				}

				.time {
					font-size: 24rpx;
					color: #666;
					background: #f0f2f5;
					padding: 8rpx 20rpx;
					border-radius: 24rpx;
				}
			}
		}
	}

	.join-section {
		position: relative;
		z-index: 1;
		padding: 20rpx 30rpx 40rpx;

		.join-btn {
			background: linear-gradient(135deg, #4a90e2, #2c3e50);
			color: #fff;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			padding: 20rpx 0;
			box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);

			&:active {
				transform: scale(0.98);
			}
		}
	}

	.tabs {
		display: flex;
		background: #fff;
		padding: 0 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin: 0 30rpx;
		position: relative;
		z-index: 1;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 30rpx 0;
			position: relative;

			&.active {
				color: #4a90e2;
				font-weight: bold;

				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background: #4a90e2;
					border-radius: 3rpx;
				}
			}
		}
	}

	.tab-content {
		background: #fff;
		margin: 0 30rpx 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		padding: 30rpx;
		position: relative;
		z-index: 1;
		min-height: 400rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

		.detail-tab {
			.match-records {
				margin-top: 20rpx;

				.record-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					padding: 0 10rpx;
				}

				.record-item {
					background: #f9f9f9;
					border-radius: 12rpx;
					padding: 20rpx;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;

					.record-time {
						font-size: 24rpx;
						color: #666;
						margin-right: 20rpx;
						min-width: 240rpx;
					}

					.record-info {
						flex: 1;
						display: flex;
						flex-direction: column;

						.record-name {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
							margin-bottom: 6rpx;
						}

						.record-match-id {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}

			.empty-tip {
				text-align: center;
				color: #999;
				font-size: 28rpx;
				padding: 100rpx 0;
				background: rgba(0, 0, 0, 0.02);
				border-radius: 12rpx;
				margin: 30rpx 0;

				&:before {
					display: block;
					font-size: 60rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.video-tab {
			.video-list {
				.video-item {
					background: #f9f9f9;
					border-radius: 16rpx;
					padding: 20rpx;
					margin-bottom: 30rpx;

					video {
						width: 100%;
						height: 400rpx;
						border-radius: 12rpx;
					}

					.video-name {
						font-size: 28rpx;
						color: #333;
						margin-top: 20rpx;
						padding: 0 10rpx;
					}
				}
			}
		}

		.data-tab {
			.data-card {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
				border-left: 6rpx solid #4a90e2;

				.data-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 30rpx;
					text-align: center;
					position: relative;

					&:after {
						content: "";
						position: absolute;
						bottom: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 4rpx;
						background: #4a90e2;
						border-radius: 2rpx;
					}
				}

				.match-time {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 10rpx;
					border-bottom: 1px solid rgba(0, 0, 0, 0.05);
					transition: all 0.3s;

					&:hover {
						background-color: rgba(74, 144, 226, 0.05);
					}

					&:last-child {
						border-bottom: none;
					}

					.info-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #666;

						.icon {
							font-size: 32rpx;
							margin-right: 10rpx;
						}

						text {
							margin-left: 10rpx;
						}
					}

					.info-value {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						background: rgba(74, 144, 226, 0.1);
						padding: 6rpx 16rpx;
						border-radius: 30rpx;
					}
				}
			}

			.data-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.data-team {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}

				.data-label {
					width: 120rpx;
					text-align: center;
					font-size: 26rpx;
					color: #666;
				}

				.data-value {
					flex: 1;
					font-size: 40rpx;
					font-weight: bold;
					text-align: center;

					&.team-a {
						color: #4a90e2;
					}

					&.team-b {
						color: #e74c3c;
					}
				}

				.data-divider {
					width: 120rpx;
					height: 2rpx;
					background: #ddd;
				}
			}
		}

		.empty-tip {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			padding: 100rpx 0;
			background: rgba(0, 0, 0, 0.02);
			border-radius: 12rpx;
			margin: 30rpx 0;

			&:before {
				content: "📊";
				display: block;
				font-size: 60rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
